<template>
    <div class="content">
        <headerSetCom>
            <template #title-content>
                <div>
                    <span>编辑用户</span>
                </div>
            </template>
            <template #title>
                <div class="iconss">
                    <span @click="editUser">保存</span>
                </div>
            </template>
        </headerSetCom>
        <div class="main">
            <van-cell-group inset style="margin-top: 0.1rem;">
                <van-field v-model="state.avatar" label="头像" placeholder="选择头像" @focus="showHeaderFn" />
                <van-field v-model="state.nickname" label="昵称" placeholder="请输入昵称" />
                <!-- <van-field v-model="state.gender" label="性别" placeholder="请输入性别"> -->
                <div class="gender">
                    <p>请选择性别</p>
                    <van-radio-group class="gender_name" v-model="state.gender" shape="dot" direction="horizontal"
                        label-position="center">
                        <van-radio name="Female">男</van-radio>
                        <van-radio name="Other">女</van-radio>
                    </van-radio-group>
                </div>
                <!-- </van-field> -->
                <van-field readonly v-model="state.birthday" label="生日" placeholder="请选择生日" @focus="birthdayClick" />
                <van-cell-group inset>
                    <van-field v-model="state.bio" rows="2" autosize label="留言" type="textarea" maxlength="50"
                        placeholder="请输入留言" show-word-limit />
                </van-cell-group>
            </van-cell-group>
        </div>

        <!-- 生日选择 -->
        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '60%' }">
            <van-date-picker v-model="currentDate" title="选择日期" :min-date="new Date(1900, 0, 1)" :max-date="newDates"
                @confirm="confirmClick" @cancel="cancelClick" />
        </van-popup>

        <!-- 头像弹出 -->
        <van-popup v-model:show="showHeader" position="bottom" :style="{ height: '30%' }">
            <div class="box">
                <van-button @click="pzClick">获取相册</van-button>
                <van-button>拍照</van-button>
                <van-button @click="colseFn">取消 </van-button>
            </div>
        </van-popup>


        <input type="file" ref="fileInput" @change="handleFileChange" style="display: none;" />
    </div>
</template>

<script lang="ts" setup>
import headerSetCom from '@/components/headerSetCom/headerSetCom.vue';
import { editUserFn } from '@/API/user';
import { reactive, ref, useId } from 'vue';

const data = new Date()
const getYear = data.getFullYear()
const getMounth = data.getMonth()
const getDay = data.getDate()
const newDate = getYear + '-' + getMounth + '-' + getDay
console.log(typeof newDate)
const newDates = new Date(newDate)
console.log(new Date(newDate))
const currentDate = ref(['2021', '01', '01']);

const showHeader = ref(false) //控制头像的弹窗


const refChange = ref()

// 处理文件选择
const handleFileChange = (event:any) => {
    const file = event.target.files[0];
    if (file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
        // 这里可以将文件路径或预览设置到头像
        state.avatar = URL.createObjectURL(file); // 生成文件URL
    }
};


// 点击拍照按钮
function pzClick() {
    // 触发文件输入框的点击事件
    const input = document.querySelector('input[type=file]') as HTMLInputElement;
    if (input) {
        input.click();
    }
}

const state = reactive({
    nickname: localStorage.getItem('nickname') || '',
    avatar: '',
    gender: localStorage.getItem('gender') || '',
    birthday: localStorage.getItem('birthday') || '',
    bio: localStorage.getItem('bio') || ''
})
const showBottom = ref(false) //控制日期的弹窗



// 调用编辑接口
function editUser() {
    editUserFn(
        String(localStorage.getItem("userId")), state).then(res => {
            console.log(res)
            localStorage.setItem('nickname', state.nickname)
            localStorage.setItem('gender', state.gender)
            localStorage.setItem('birthday', state.birthday)
            localStorage.setItem('bio', state.bio)
        })
}


// 显示日期选择框
function birthdayClick() {
    console.log('hhhhhh')
    showBottom.value = true

}



// 日期确认
function confirmClick(value: any) {
    console.log(String((value.selectedValues).join('-')))
    state.birthday = String((value.selectedValues).join('-'))
    showBottom.value = false

}

// 关闭日期选择弹窗
function cancelClick() {
    showBottom.value = false
}


// 打开头像的弹窗
function showHeaderFn() {
    showHeader.value = true
}

// 关闭头像弹窗
function colseFn() {
    showHeader.value = false
}
</script>



<style lang="scss" scoped>
.iconss {
    position: absolute;
    right: 0.1rem;
    top: 0.15rem;
    font-size: 0.15rem;
    color: blue;
}

.gender {
    // background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
    border-color: rgba(245, 246, 247, 0.5);
    height: 0.7rem;

    // width: 90%;
    p {
        flex: 1;
        padding-left: 0.15rem;
        // background-color: red;
    }

    .gender_name {
        flex: 2;
    }
}


.showBottom {
    background-color: red;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0.3rem;

    .van-button {
        margin-bottom: 0.08rem;
    }
}
</style>